<template>
	<view>
		<u-card :head-style="headStyle">
			<view class="car_container" slot="body">
				<view class="car_information">
					<view class="image">
						<image src="/static/images/car.png" mode="widthFix"></image>
					</view>
					<view class="car_text">
						<view class="number">
							{{car_detail.car_num}}
						</view>
						<view class="brand">
							{{car_detail.brand}}{{car_detail.model}}
						</view>
					</view>
				</view>
				<view class="car_time">
					<view class="item">
						申请时间：<text>{{app_detail.add_time}}</text>
					</view>
					<view class="item">
						预约时间：<text>{{app_detail.appointment_time}}</text>
					</view>
				</view>
			</view>

		</u-card>

		<u-card :head-style="headStyle">
			<view class="project" slot="body">
				<view class="item" @click="next_service">
					<view class="day">
						<text>{{next_serviceDay}}</text> 天
					</view>
					<view class="text">
						下次保养
					</view>
				</view>
				<view class="line">

				</view>
				<view class="item" @click="next_insurance">
					<view class="day">
						<text>{{next_insuranceDay}}</text> 天
					</view>
					<view class="text">
						下次保险
					</view>
				</view>
				<view class="line">

				</view>
				<view class="item" @click="annual_review">
					<view class="day">
						<text>{{annual_reviewDay}}</text> 天
					</view>
					<view class="text">
						年审到期
					</view>
				</view>
			</view>

		</u-card>

		<u-card>
			<view class="add_project" slot="head">
				<view class="head">
					<view class="money">
						￥{{app_detail.price}}
					</view>
					<view class="add_project" v-if="app_detail.pay_status  == 0"
						@click="addProject(app_detail.id,app_detail.uid)">
						<u-icon name="plus" size="28" label="添加项目"></u-icon>
					</view>
				</view>
			</view>
			<view class="body" slot="body">
				<view class="project_container" v-for="(item,index) in app_detail.goods_str">
					<view class="p_item">
						<view class="head">
							<view class="money">
								<text class="flex1">￥ {{item.price}} </text>
								<text class="name flex1">{{item.product_name}}</text>
								<text class="flex1 cart_num">x{{item.cart_num}}</text>
							</view>

						</view>
						<view class="add_btn">

						</view>
					</view>
					<view class="project_detail" v-for="(item1,index1) in item.specs">
						<view class="head">
							<view class="money">
								<text>￥</text>
								<text>{{item1.price}}</text>
								<text class="name">{{item1.product_name}}</text>

							</view>

						</view>
					</view>


				</view>

			</view>

		</u-card>

		<u-card>

			<view class="construction_information" slot="head">
				<view class="head">
					<u-form-item :border-bottom="false" :label-position="labelPosition" label="施工员：" prop="type"
						label-width="150">
						<u-input type="select" :select-open="selectShowAppointment" v-model="model.type"
							placeholder="请选择" @click="selectShowAppointment = true">
						</u-input>
					</u-form-item>

				</view>
			</view>
			<view class="body" slot="body">
				<view class="remake">
					备注：
					<textarea v-model="app_detail.remark" placeholder="请输入" rows="20" cols="20"
						style="height: 80rpx;margin-top: 10rpx;"></textarea>
				</view>
			</view>

		</u-card>
		<u-select mode="single-column" :list="newAdminList" v-model="selectShowAppointment"
			@confirm="appointmentTypeConfirm"></u-select>
		<view class="money_btn">
			<view class="money">
				共计：￥<text>{{app_detail.price}}</text>
			</view>
			<button type="default" @click="submit(app_detail.id)" v-if="app_detail.pay_status == 0">付款</button>
		</view>
		<u-picker title="保养到期时间" mode="time" v-model="show1" @confirm="handelConfirmService"></u-picker>
		<u-picker title="保险到期时间" mode="time" v-model="show2" @confirm="handelConfirmInsurance"></u-picker>
		<u-picker title="年审到期时间" mode="time" v-model="show3" @confirm="handelConfirmReview"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				next_serviceDay: 0,
				next_insuranceDay: 0,
				annual_reviewDay: 0,
				adminList: [],
				project_detail: {
					"id": "24",
					"goods_str": [{
							"goods_id": "1",
							"goods_name": "小保养服务",
							"price": "12",
							"specs": [{
									"specs_name": "机油 6升",
									"specs_price": "68"
								},
								{
									"specs_name": "机油 16升",
									"specs_price": "68"
								}
							]
						},
						{
							"goods_id": "1",
							"goods_name": "小保养服务",
							"price": "12",
							"specs": [{
								"specs_name": "机油 6升",
								"specs_price": "68"
							}]
						}
					],
					"price": "100",
					"admin_id": "2",
					"remark": "1"
				},
				headStyle: {
					padding: 0
				},
				model: {
					type: ''
				},
				newAdminList: [],
				labelPosition: 'left',
				selectShowAppointment: false,
				errorType: ['message'],
				rules: {
					type: [{
						required: true,
						message: '请选择预约类型',
						trigger: 'change',
					}],
				},
				car_detail: {},
				app_detail: {},
				show1: false,
				show2: false,
				show3: false,
				value1: Number(new Date()),
				timestamp: ''
			}
		},
		onLoad(options) {
			this.timestamp = Date.parse(new Date()) / 1000
			console.log(this.timestamp, 'timestamp3')
			var loginRes = this.checkLogin();
			// console.log(loginRes,'loginResloginRes')
			// 	if (!loginRes) {
			// 		return false;
			// 	}
			console.log(options);
			const {
				id,
				car_id
			} = options
			this.getCarDetail(car_id)
			this.getAppointmentDetail(id)
			this.getAdminList()
		},
		methods: {
			intervalTime(startTime, endTime) {
				// var timestamp=new Date().getTime(); //计算当前时间戳
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
			 	date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
			 var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000)) + 1;
				//计算出小时数

				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				if (days <= 0) {
					days = 0
				}
				return days
			},
			handelConfirmService(e) {
				let _this = this
				const {
					timestamp
				} = e
				let newTimestamp = timestamp - _this.timestamp
				const next_serviceDay = this.intervalTime(_this.timestamp, timestamp)
				this.next_serviceDay = next_serviceDay
			},
			handelConfirmInsurance(e) {
				let _this = this
				const {
					timestamp
				} = e
				let newTimestamp = timestamp - _this.timestamp
				const next_insuranceDay = this.intervalTime(_this.timestamp, timestamp)
				this.next_insuranceDay = next_insuranceDay
			},
			handelConfirmReview(e) {
				let _this = this
				const {
					timestamp
				} = e
				let newTimestamp = timestamp - _this.timestamp
				const annual_reviewDay = this.intervalTime(_this.timestamp, timestamp)
				this.annual_reviewDay = annual_reviewDay
			},
			change(e) {
				console.log(e)
			},
			next_service() {
				this.show1 = true
				console.log('next_service')
			},
			next_insurance() {
				this.show2 = true
				console.log('next_insurance')
			},
			annual_review() {
				this.show3 = true
				console.log('annual_review')
			},
			getAdminList() {
				let _this = this
				let newAdminList
				this.$u.api.getAdminList().then(res => {
					console.log(res, 'getAdminListgetAdminList')
					console.log(_this.app_detail.admin_id, 'admin_idadmin_id')
					if (res.status == 200) {
						let adminList = res.data.list
						console.log(adminList, 'adminListadminList')

						newAdminList = adminList.filter((item, index) => {

							return item.id == _this.app_detail.admin_id
						})
						console.log(newAdminList, 'newAdminListnewAdminList')
						if (newAdminList.length == 1) {
							_this.model.type = newAdminList[0].real_name
						}


						adminList.map((item, index) => {
							_this.newAdminList.push({
								value: item.id,
								label: item.real_name,
								id: item.id
							})
						})
						// console.log(_this.newAdminList,'newAdminListsnewAdminLists')

					}

				})
			},
			addProject(appointment_id, uid) {
				uni.navigateTo({
					url: `/pages/add_project/add_project?appointment_id=${appointment_id}&uid=${uid}`
				});
			},
			// 选择商品类型回调
			appointmentTypeConfirm(e) {
				console.log(e, 'selected admin_id');
				this.app_detail.admin_id = e[0].value;
				this.model.type = '';
				e.map((val, index) => {
					this.model.type += this.model.type == '' ? val.label : '-' + val.label;
				})
			},
			getCarDetail(car_id) {
				this.$u.api.getCarDetail({
					id: car_id
				}).then(res => {
					console.log(res, 'getCarDetail');
					if (res.status == 200) {
						this.car_detail = res.data;
						this.next_serviceDay = res.data.next_service
						this.next_insuranceDay = res.data.next_insurance
						this.annual_reviewDay = res.data.annual_review
					}
				})
			},
			getAppointmentDetail(id) {
				this.$u.api.getAppointmentDetail({
					id
				}).then(res => {
					console.log(res, 'getAppointmentDetail');
					if (res.status == 200) {
						this.app_detail = res.data;

					}
				})
			},
			submit() {
				let params = {};
				params.id = this.app_detail.id;
				params.remark = this.app_detail.remark;
				params.admin_id = this.app_detail.admin_id;
				params.pay_status = 1;
				console.log(params);
				if (params.admin_id == 0) {
					uni.showToast({
						icon: "error",
						title: '请选择施工员',
						duration: 2000
					});
					return false;
				}
				this.$u.api.submit(params).then(res => {
					console.log(res, 'getAppointmentDetail');
					if (res.status == 200) {
						uni.showToast({
							title: '提交成功！',
							duration: 2000
						});
						setInterval(() => {
							uni.navigateBack();
						}, 2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
	}

	.car_container {
		.car_information {
			display: flex;
			align-items: center;

			.image {
				width: 100rpx;

				image {
					width: 100%;
				}

			}

			.car_text {
				margin-left: 22rpx;

				.number {
					font-size: 36rpx;
					font-weight: 700;
				}

			}

		}

		.car_time {
			margin-top: 10rpx;
			// display: flex;
			// justify-content: space-between;

			.item {
				margin-top: 14rpx;
				text{
					background-color: #f5f5f5;
					padding: 6rpx 20rpx 6rpx 10rpx;
					font-size: 26rpx;
					color: #666666;
					border-radius: 6rpx;
				}
			}
		}
	}

	.project {
		text-align: center;
		display: flex;
		justify-content: space-around;

		.item {
			.day {
				color: #999999;
				margin-bottom: 10rpx;
				letter-spacing: 4rpx;

				text {
					color: #333333;
					font-size: 40rpx;
					padding-right: 6prx;
				}
			}
		}

		.line {
			height: 100rpx;
			background: #e3e3e3;
			width: 2rpx;
		}

	}

	.add_project {
		.head {
			display: flex;
			justify-content: space-between;

			.money {
				color: #eb3626;
				font-weight: 700;
				font-size: 28rpx;

				.name {
					width: 220rpx;
					overflow: hidden;
				}
			}
		}
	}

	.money_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 16rpx 30rpx;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;

		.money {
			flex: 3;

			text {
				font-weight: 700;
			}
		}

		button {
			flex: 1;
			font-size: 24rpx;
			padding: 12rpx 34rpx;
			background-color: #eb3626;
			color: #fff;
		}
	}

	.project_container {
		margin-top: 20rpx;

		.p_item {
			// display: flex;
			// justify-content: space-between;

			.money {
				display: flex;

				justify-content: space-between;
				align-items: center;

				text {

					color: #000;
				}

				.flex1 {
					flex: 1;
				}

				.cart_num {
					text-align: right;
				}

				.name {
					width: 330rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-weight: 700;
				}
			}
		}

		.project_detail {
			margin-top: 10rpx;

			.money {
				text {
					// color: #ccc;
				}

				.name {
					font-size: 26rpx;
					margin-left: 60rpx;
					color: #ccc;
				}

				.specifications {
					margin-left: 20rpx;
					color: #ccc;
				}
			}
		}
	}

	.project_container:first-of-type {
		margin-top: 0;
	}

	.construction_information {
		.head .u-form-item {
			padding: 0;
		}

		.remake {
			textarea {
				width: 100%;
				height: 40rpx !important;
			}
		}
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
